import 'package:flutter/material.dart';

class BackgroundWithRings extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Stack(
            fit: StackFit.expand,
            children: <Widget>[
                Image.asset(
                    'assets/r2.png', //背景模糊图
                    fit: BoxFit.cover,
                ),
                ClipOval(
                    clipper: MyCircleClipper( //背景清晰图剪切出一个圆形来
                        radius: 130.0,
                        offset: Offset(30.0, 0),
                    ),
                    child: Image.asset(
                        'assets/r1.png',
                        fit: BoxFit.cover,
                    ),
                ),
                
                CustomPaint(
                    painter: WhiteCircleCutoutPainter(//背景上画圈圈
                        centerOffset: const Offset(30, 0),
                        circles: [
                            Circle(radius: 130.0, alpha: 0x10),
                            Circle(radius: 130.0 + 15, alpha: 0x20),
                            Circle(radius: 130.0 + 30, alpha: 0x30),
                            Circle(radius: 130.0 + 75, alpha: 0x50),
                        ]
                    ),
                    child: Container(),
                ),
            ],
        );
    }
}


///自定义剪切器剪切个圆形出来
class MyCircleClipper extends CustomClipper<Rect> {
    final double radius;
    final Offset offset;
    
    MyCircleClipper({this.radius, this.offset});
    
    @override
    Rect getClip(Size size) {
        return Rect.fromCircle(
            center: Offset(0.0, size.height / 2) + offset,
            radius: radius,
        );
    }
    
    @override
    bool shouldReclip(CustomClipper<Rect> oldClipper) {
        return true;
    }
}

///自定义画笔画圈圈
class WhiteCircleCutoutPainter extends CustomPainter {
    
    final Color overlayColor = const Color(0xFFAA88AA);
    
    final List<Circle> circles;
    final Offset centerOffset;
    final Paint whitePaint;
    final Paint borderPaint;
    
    WhiteCircleCutoutPainter({
        this.circles = const [],
        this.centerOffset = const Offset(0, 0),
    })
        :
            whitePaint = Paint(),
            borderPaint = Paint() {
        borderPaint
            ..color = const Color(0x10FFFFFF)
            ..style = PaintingStyle.stroke
            .. strokeWidth = 3.0;
    }
    
    @override
    void paint(Canvas canvas, Size size) {
        for (var i = 1; i < circles.length; i++) {
            _maskCircle(canvas, size, circles[i - 1].radius);
            whitePaint.color = overlayColor.withAlpha(circles[i - 1].alpha);
            canvas.drawCircle(Offset(0, size.height / 2) + centerOffset, circles[i].radius, whitePaint);
            canvas.drawCircle(Offset(0, size.height / 2) + centerOffset, circles[i - 1].radius, borderPaint);
        }
        
        _maskCircle(canvas, size, circles.last.radius);
        whitePaint.color = overlayColor.withAlpha(circles.last.alpha);
        canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), whitePaint);
        canvas.drawCircle(Offset(0, size.height / 2) + centerOffset, circles.last.radius, borderPaint);
    }
    
    _maskCircle(Canvas canvas, Size size, double radius) {
        Path clippedCircle = Path();
        clippedCircle.fillType = PathFillType.evenOdd;
        clippedCircle.addRect(Rect.fromLTWH(0, 0, size.width, size.height));
        clippedCircle.addOval(Rect.fromCircle(
            center: Offset(0, size.height / 2) + centerOffset,
            radius: radius,
        ));
        canvas.clipPath(clippedCircle);
    }
    
    @override
    bool shouldRepaint(CustomPainter oldDelegate) {
        return true;
    }
    
}

class Circle {
    final double radius;
    final int alpha;
    
    Circle({this.radius, this.alpha = 0xFF});
    
}